<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>班级信息管理平台</title>
<link rel="stylesheet" href="./lib/bootstrap.min.css">

</head>
<body>
<div id="app" class='container'>
    <!-- 创建表头 -->
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">
                班级信息管理平台
            </h3>
        </div>
        <div v-show="isShow" class="panel-body form-inline" >
            <button type="button" class="btn btn-primary" @click="isShow = false">添加学员</button>
            <input type="text" class="form-control pull-right" placeholder="学生查询" v-model="str" v-focus>
        </div>
        <div class="panel-body form-inline" >
            <div v-show="!isShow" class="row" style="margin-bottom: 20px">
                <div class="form-group col-md-4">
                    <label class="sr-only"></label>
                    <div class="input-group">
                        <div class="input-group-addon">姓名</div>
                        <input type="text" class="form-control"  v-model="user.name">
                    </div>
                </div>
                 <div class="form-group col-md-4">
                <label class="sr-only"></label>
                <div class="input-group">
                    <div class="input-group-addon">学号</div>
                    <input type="text" class="form-control"  v-model="editStu.studentNum">
                </div>
            </div>
            <div class="form-group col-md-4">
                <label class="sr-only"></label>
                <div class="input-group">
                    <div class="input-group-addon">手机号</div>
                    <input type="text" class="form-control"  v-model="editStu.tel">
                </div>
            </div>
            </div> 
           
            <div v-show="!isShow" class="row" style="margin-bottom: 20px">
                <div class="form-group col-md-4">
                    <label class="sr-only"></label>
                    <div class="input-group">
                        <div class="input-group-addon">性别</div>
                        <select class="form-control"  v-model="editStu.sex">
                        <option value="男">男</option>
                        <option value="女">女</option>
                        </select>
                    </div>
                </div>
                <div class="form-group col-md-4">
                    <label class="sr-only"></label>
                    <div class="input-group">
                        <div class="input-group-addon">年龄</div>
                        <input type="text" class="form-control"  v-model="editStu.age">
                    </div>
                </div>
                <div class="form-group col-md-4">
                    <label class="sr-only"></label>
                    <div class="input-group">
                        <div class="input-group-addon">专 业</div>
                        <input type="text" class="form-control"  v-model="editStu.major">
                    </div>
                </div>
            </div> 
            <div v-show="!isShow" class="text-right">
                <input type="button" value="添加" class="btn btn-primary" @click="add">
            </div>
        </div>
       
    </div>
            <!-- 创建表 -->
    <table class="table  table-hover">
        <thead>
            <tr class="info">
                <th><input type="checkbox"></th>
                <th>姓名</th>
                <th>学号</th>
                <th>手机号</th>
                <th>性别</th>
                <th>年龄</th>
                <th>专业</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in search()" :key="index">
                <td><input type="checkbox"></td>
                <td v-for="i in item">{{i}}</td>
                <td>
                    <!-- Bootstrap modal组件，弹出模态框 --> 
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editModal" @click="edit(index)">编辑</button>
                    <button type="button" class="btn btn-danger" @click="del(index)">删除</button>
                </td>
            </tr>
        </tbody>
    </table>
    
    <!-- 模态框内容 -->
<div class="modal" id="editModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content modalContent">
            <div class="modal-body">
                <!-- input group组件 -->
                <div class="row" style="margin-bottom: 20px">
                    <div class="form-group col-md-4">
                        <label class="sr-only"></label>
                        <div class="input-group">
                            <div class="input-group-addon">姓名</div>
                            <input type="text" class="form-control"  v-model="editStu.name">
                        </div>
                    </div>
                    <div class="form-group col-md-4">
                        <label class="sr-only"></label>
                        <div class="input-group">
                            <div class="input-group-addon">学号</div>
                            <input type="text" class="form-control"  v-model="editStu.studentNum">
                        </div>
                    </div>
                    <div class="form-group col-md-4">
                        <label class="sr-only"></label>
                        <div class="input-group">
                            <div class="input-group-addon">手机号</div>
                            <input type="text" class="form-control"  v-model="editStu.tel">
                        </div>
                    </div>
                </div>
                <div class="row" style="margin-bottom: 20px">
                    <div class="form-group col-md-4">
                        <label class="sr-only"></label>
                        <div class="input-group">
                            <div class="input-group-addon">性别</div>
                            <select class="form-control"  v-model="editStu.sex">
                            <option value="男">男</option>
                            <option value="女">女</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group col-md-4">
                        <label class="sr-only"></label>
                        <div class="input-group">
                            <div class="input-group-addon">年龄</div>
                            <input type="text" class="form-control"  v-model="editStu.age">
                        </div>
                    </div>
                    <div class="form-group col-md-4">
                        <label class="sr-only"></label>
                        <div class="input-group">
                            <div class="input-group-addon">专 业</div>
                            <input type="text" class="form-control"  v-model="editStu.major">
                        </div>
                    </div>
                </div> 
            </div>
            <div class="modal-footer">
                <!-- 提交按钮绑定click事件 -->
                <button class="btn btn-primary" @click.stop="onSubmit">确定</button>
                <button class="btn btn-secodary" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
    
</div>
</body>
<script src="./lib/jquery.js"></script>
<script src="./lib/bootstrap.min.js"></script>
<script src="./lib/vue.js"></script>
<script>
//由于本案未在vue中引入jquery，所以要将关闭模态框的modal()方法重新定义一个js方法
var mh = {
    modalHide: function(){
        $('#editModal').modal('hide');
    }
};
Vue.directive('focus', {
    inserted:function(el){
        el.focus();
    }
})
var vm = new Vue({
    el:'#app',
    data:{
        user:{
            name:'',
            studentNum:'',
            tel:'',
            sex:'男',
            age:'',
            major:''
        },
        studentInfor: [
            {name:'张三',studentNum:'001',tel:'13289069832',sex:'男',age:20,major:'英语'},
            {name:'张三丰',studentNum:'002',tel:'13289069832',sex:'男',age:20,major:'汉语'},
            {name:'张无忌',studentNum:'003',tel:'13289069832',sex:'男',age:19,major:'软件'},
            {name:'周芷若',studentNum:'004',tel:'13289069832',sex:'女',age:18,major:'网络'}
        ],
        isShow:true,
        str:'',
        editStu: {
            name:'',
            studentNum:'',
            tel:'',
            sex:'',
            age:'',
            major:''
        },
        beforeIndex:0
    },
    methods:{
        add(){
            var user = {};
            for(var i in this.user){
                if(!this.user[i]){
                    return;
                }
                user[i] = this.user[i];
            }
            console.log(user);
            this.studentInfor.push(user);
            for(var i in this.user){
                this.user[i] = ''
            }
            this.user['sex'] = '男';
            this.isShow = true;
        },
        del(index){
            var index = this.studentInfor.findIndex(item => {
                if (item.name== name) {
                    return true
                }
            })

            this.studentInfor.splice(index, 1)
        },
        
        search(){
            return this.studentInfor.filter((item) => {
                if (item.name.includes(this.str)) {
                    return item
                }
            })
        }
        },
        edit(index){
            this.editStu = this.studentInfor[index];
            this.beforeIndex = index;
        },
        onSubmit(){
            for(var i = 0; i < this.studentInfor.length; i++){
                if(i == this.beforeIndex){
                    this.studentInfor[i] =  this.editStu;
                }
            }
            mh.modalHide();    //同时关闭模态框
        }
    
})
</script>
</html>